<template>
  <div>
    <el-empty v-if="userList.length == 0" description="没有好友"></el-empty>
    <ul>
      <li v-for="user in userList" :key="user.userId" class="userItme">
        <div class="fl">
          <img class="h-scu fl" :src="user.avatarUrl" alt="" />
        </div>
        <div class="fl userBody">
          <div class="clearfix">
            <span class="userName fl">{{
              user.nickName ? user.nickName : "未知"
            }}</span>
            <div class="clearfix fl" v-show="1">
              <img
                v-if="user.identity == 1"
                class="fl"
                src="@/assets/认证.png"
                style="width: 15px; margin: 3px"
                alt=""
              />
            </div>
          </div>
          <div class="clearfix">
            <span class="userMsg">点赞 {{ user.goodCount }}</span>
            <span class="userMsg">评论 {{ user.commentCount }}</span>
            <span class="userMsg">帖子 {{ user.articleCount }}</span>
          </div>
          <div class="clearfix">
            <p class="userProfile">{{ user.signature }}</p>
          </div>
        </div>
        <div class="fl handleAction">
          <el-button
            round
            @click="tookWidthFriend(user.userId, user.nickName, user.avatarUrl)"
            >私信</el-button
          >
          <el-button type="danger" round>删除</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import userMessageApi from "@/api/userMessageApi";
export default {
  name: "users",
  data() {
    return {
      userList: [
        {
          userId: 202003151002,
          avatarUrl:
            "https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/gy-avartar.jpg",
          goodCount: 6,
          commentCount: 2,
          articleCount: 3,
          signature: "个性签名",
        },
      ],
    };
  },
  created() {
    this.getMyFriend();
  },
  methods: {
    clickDelete(friendId, friendIdentity) {},
    getMyFriend() {
      userMessageApi.getMyFriend().then((response) => {
        this.userList = response.data;
      });
    },
    //进入和好友的聊天页面
    tookWidthFriend(userId, nickName, avatarUrl) {
      this.$router.push({
        name: "took",
        params: {
          userId,
          nickName,
          avatarUrl,
        },
      });
    },
  },
};
</script>

<style scoped>
.userItme {
  height: 80px;
  /* background-color: pink; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.h-scu {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin: 20px;
}
.userBody {
  width: 800px;
  height: 80px;
  padding: 10px 0;
}
.userName {
  /* padding-top: 10px; */
}
.userMsg {
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
  margin-right: 15px;
}
.userProfile {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
}
.handleAction {
  margin-top: 1rem;
}
</style>
